<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绞线处理工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .hover-lift {
                @apply transform hover:-translate-y-1 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cogs text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-primary">绞线处理工具</h1>
            </div>
            <div class="text-sm text-gray-500">
                高效处理绞线信息，轻松复制结果
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-12">
        <div class="max-w-4xl mx-auto">

            <!-- 输入区域 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8 transform transition-all duration-300 hover:shadow-lg">
                <h2 class="text-xl font-semibold mb-4 text-dark flex items-center">
                    <i class="fa fa-pencil-square-o text-primary mr-2"></i>输入绞线信息
                </h2>
                <div class="space-y-4">
                    <textarea 
                        id="inputStr" 
                        class="w-full p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-custom resize-none"
                        rows="4" 
                        placeholder="请输入绞线信息，例如：1：5米标记2根，10+5米标记1根，20米标记3根，自然交联，完成"></textarea>
                    
                    <button 
                        id="processBtn" 
                        class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow transition-custom hover-lift flex items-center"
                    >
                        <i class="fa fa-magic mr-2"></i>处理信息
                    </button>
                </div>
            </div>

            <!-- 输出区域 -->
            <div id="outputSection" class="hidden bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:shadow-lg">
                <h2 class="text-xl font-semibold mb-4 text-dark flex items-center">
                    <i class="fa fa-list-alt text-primary mr-2"></i>处理结果
                </h2>
                <p id="resultCount" class="text-sm text-gray-500 mb-4">共 <span class="font-medium text-primary">0</span> 条结果</p>
                
                <div id="outputContainer" class="space-y-3 max-h-[500px] overflow-y-auto pr-2">
                    <!-- 结果将通过JavaScript动态插入 -->
                </div>

                <div class="mt-6 flex justify-center">
                    <button 
                        id="copyAllBtn" 
                        class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-5 rounded-lg shadow transition-custom hover-lift flex items-center"
                    >
                        <i class="fa fa-copy mr-2"></i>复制全部结果
                    </button>
                </div>
            </div>

            <!-- 复制成功提示 -->
            <div id="copyToast" class="fixed bottom-6 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center">
                <i class="fa fa-check-circle mr-2"></i>
                <span>复制成功！</span>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-6">
        <div class="container mx-auto px-4 text-center text-sm text-gray-400">
            <p>绞线处理工具 &copy; 2025 - 高效便捷的绞线信息处理解决方案</p>
        </div>
    </footer>

    <script>
        // 处理函数 - 转换为JavaScript版本
        function convertInput(inputStr) {
            // 分割数字部分和其余部分
            const splitIndex = inputStr.indexOf('：');
            if (splitIndex === -1) return [];
            
            const numPart = inputStr.substring(0, splitIndex);
            const rest = inputStr.substring(splitIndex + 1);
            
            // 分割各个部分
            const parts = rest.split('，').map(p => p.trim());
            
            // 验证部分数量
            if (parts.length < 3) return [];
            
            const process = parts[parts.length - 2];
            const colors = ['红', '黄', '绿', '兰', '黑'];
            let colorIndex = 0;
            const lines = [];
            let hasGreenWithPlus = false;
            
            // 处理每个片段
            for (let i = 0; i < parts.length - 2; i++) {
                const segment = parts[i];
                // 使用正则匹配
                const match = segment.match(/(.+米)标记(\d+)根/);
                if (!match) continue;
                
                const [, meters, countStr] = match;
                const count = parseInt(countStr, 10);
                
                // 生成指定数量的行
                for (let j = 0; j < count; j++) {
                    const color = colors[colorIndex % colors.length];
                    let currentMeters = meters;
                    
                    // 检查是否有带+的绿色
                    if (color === '绿' && meters.includes('+')) {
                        hasGreenWithPlus = true;
                    }
                    
                    // 处理红色且已有带+的绿色
                    if (color === '红' && hasGreenWithPlus) {
                        const metersWithoutM = meters.replace('米', '');
                        const partsMeters = metersWithoutM.split('+');
                        
                        if (partsMeters.length === 2) {
                            currentMeters = `(${partsMeters[0]}+${partsMeters[1]})米`;
                        } else if (partsMeters.length === 4) {
                            currentMeters = `(${partsMeters[0]}+${partsMeters[1]})+(${partsMeters[2]}+${partsMeters[3]})米`;
                        }
                    }
                    
                    // 创建行并添加到结果
                    let line = `${numPart}：自然交联料${color}${currentMeters}分盘，${process}`;
                    lines.push(line);
                    colorIndex++;
                }
            }
            
            // 如果没有带+的绿色，移除"分盘"
            if (!hasGreenWithPlus) {
                return lines.map(line => line.replace('分盘', ''));
            }
            
            return lines;
        }

        // DOM元素
        const inputStr = document.getElementById('inputStr');
        const processBtn = document.getElementById('processBtn');
        const outputSection = document.getElementById('outputSection');
        const outputContainer = document.getElementById('outputContainer');
        const resultCount = document.getElementById('resultCount').querySelector('span');
        const copyAllBtn = document.getElementById('copyAllBtn');
        const copyToast = document.getElementById('copyToast');
        const header = document.querySelector('header');

        // 处理按钮点击事件
        processBtn.addEventListener('click', () => {
            const input = inputStr.value.trim();
            if (!input) {
                showToast('请输入绞线信息', 'warning');
                return;
            }
            
            // 处理输入
            const results = convertInput(input);
            
            // 显示结果
            displayResults(results);
        });

        // 显示结果
        function displayResults(results) {
            // 清空容器
            outputContainer.innerHTML = '';
            
            // 更新计数
            resultCount.textContent = results.length;
            
            // 添加结果行
            results.forEach((result, index) => {
                const resultItem = document.createElement('div');
                resultItem.className = 'flex items-center justify-between p-3 bg-neutral rounded-lg border border-gray-100 transition-custom hover:border-primary/30 group';
                
                // 行号
                const lineNumber = document.createElement('span');
                lineNumber.className = 'w-8 h-8 flex items-center justify-center bg-primary/10 text-primary rounded-full text-sm font-medium mr-3 flex-shrink-0';
                lineNumber.textContent = index + 1;
                
                // 结果文本
                const resultText = document.createElement('div');
                resultText.className = 'flex-grow break-words pr-2';
                resultText.textContent = result;
                resultText.setAttribute('data-text', result);
                
                // 复制按钮
                const copyBtn = document.createElement('button');
                copyBtn.className = 'text-gray-400 hover:text-primary transition-custom opacity-0 group-hover:opacity-100';
                copyBtn.innerHTML = '<i class="fa fa-copy text-lg"></i>';
                copyBtn.title = '复制此行';
                copyBtn.addEventListener('click', () => {
                    copyToClipboard(result);
                });
                
                // 组装
                resultItem.appendChild(lineNumber);
                resultItem.appendChild(resultText);
                resultItem.appendChild(copyBtn);
                outputContainer.appendChild(resultItem);
                
                // 添加动画
                setTimeout(() => {
                    resultItem.classList.add('animate-fadeIn');
                }, 50 * index);
            });
            
            // 显示输出区域（如果有结果）
            if (results.length > 0) {
                outputSection.classList.remove('hidden');
                // 平滑滚动到输出区域
                outputSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            } else {
                showToast('无法处理输入，请检查格式', 'error');
            }
        }

        // 复制全部结果
        copyAllBtn.addEventListener('click', () => {
            const resultElements = outputContainer.querySelectorAll('[data-text]');
            if (resultElements.length === 0) return;
            
            const allText = Array.from(resultElements)
                .map(el => el.getAttribute('data-text'))
                .join('\n');
            
            copyToClipboard(allText);
        });

        // 复制到剪贴板
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                showToast('复制成功！');
            }).catch(err => {
                console.error('复制失败:', err);
                showToast('复制失败，请手动复制', 'error');
            });
        }

        // 显示提示信息
        function showToast(message, type = 'success') {
            const toast = copyToast;
            const icon = toast.querySelector('i');
            const text = toast.querySelector('span');
            
            // 设置消息和样式
            text.textContent = message;
            
            if (type === 'success') {
                toast.className = 'fixed bottom-6 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center';
                icon.className = 'fa fa-check-circle mr-2';
            } else if (type === 'warning') {
                toast.className = 'fixed bottom-6 right-6 bg-yellow-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center';
                icon.className = 'fa fa-exclamation-triangle mr-2';
            } else if (type === 'error') {
                toast.className = 'fixed bottom-6 right-6 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center';
                icon.className = 'fa fa-times-circle mr-2';
            }
            
            // 显示提示
            setTimeout(() => {
                toast.classList.remove('translate-y-20', 'opacity-0');
            }, 10);
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }

        // 滚动时改变导航栏样式
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2', 'shadow');
            }
        });

        // 初始化示例输入
        inputStr.value = '1：5米标记2根，10+5米标记1根，20米标记3根，自然交联，完成';
    </script>
</body>
</html>
